<template>
  <div class="resume-form-container">
    <div class="resume-form">
      <h1>简历填写</h1>
      <form @submit.prevent="dataFormSubmit">

        <!-- 上传照片 -->
        <div class="form-group">
          <label for="photo">上传照片</label>
          <el-upload
            id="photo"
            class="avatar-uploader"
            action="http://localhost:8080/file/upload"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
            :before-upload="beforeAvatarUpload">
            <img v-if="this.url" :src="this.url" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </div>

        <!-- 真实姓名 -->
        <div class="form-group">
          <label for="name">真实姓名</label>
          <input type="text" id="name" v-model="dataForm.realName" >
        </div>

        <!-- 性别 -->
        <div class="form-group">
          <label>性别</label>
          <div class="radio-group">
            <label>
              <input type="radio" v-model="dataForm.sex" value=0 > 男
            </label>
            <label>
              <input type="radio" v-model="dataForm.sex" value=1 > 女
            </label>
          </div>
        </div>
        <!-- 上传简历附件 -->
        <div>
          <el-upload
            class="upload-demo"
            action="http://localhost:8080/file/upload"
          :on-change="handleChange"
          :on-remove="handleRemove"
          :before-upload="beforeUpload"
            :on-success="successHandle"
          :file-list="fileList"
          accept=".pdf"
          :limit="1"
          >
          <el-button size="small" type="primary">点击上传简历</el-button>
          <div slot="tip" class="el-upload__tip">只能上传PDF文件，且不超过10MB</div>
          </el-upload>

          <!-- 显示上传的文件图标和操作按钮 -->
          <div v-if="fileList.length > 0" class="uploaded-file-display">
            <div class="file-info">
              <i class="fas fa-file-pdf"></i> <!-- PDF图标 -->
              <span>{{ fileList[0].name }}</span>
            </div>
            <div class="file-actions">
              <el-button @click="previewFile(fileList[0])" type="text">预览</el-button>
              <el-button @click="removeFile" type="text">删除</el-button>
            </div>
          </div>
        </div>

        <!-- 教育背景 -->
        <h2>教育背景</h2>
        <div class="form-group">
          <label>学校名称</label>
          <input type="text" v-model="dataForm.university" >
        </div>
        <div class="form-group">
          <label>专业</label>
          <input type="text" v-model="dataForm.major" >
        </div>
        <div class="form-group">
          <label>学历</label>
          <select v-model="dataForm.degree" >
            <option value="专科">专科</option>
            <option value="本科">本科</option>
            <option value="硕士">硕士</option>
            <option value="博士">博士</option>
          </select>
        </div>
        <div class="form-group">
          <label>岗位意向</label>
          <select v-model="dataForm.position" >
            <option value="互联网">互联网</option>
            <option value="教育">教育</option>
            <option value="销售">销售</option>
<!--            <option value="博士">博士</option>-->
          </select>
        </div>

        <!-- 提交按钮 -->
        <button type="submit">提交简历</button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      fileList: [], // 存储上传的文件列表
      url: '',
      dataForm: {
        realName: '', // 真实姓名
        sex: 0, // 性别
        photo: null, // 上传的照片文件
        resume: null, // 上传的简历附件文件
        university: '', // 学校名称
        major: '', // 专业
        degree: '本科', // 学历
        filePath: '',  // 简历的访问地址
        position: ''   // 意向岗位
      }
    }
  },
  created () {
    this.getUserList()
  },
  methods: {
    // 获取数据列表
    getUserList () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/info'),
        method: 'get',
        params: this.$http.adornParams()
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.dataForm = data.user
          // 拼接 token 到图片地址
          if (this.dataForm.photo) {
            const token = this.$cookie.get('token')
            if (token) {
              this.url = this.dataForm.photo + '?token=' + this.$cookie.get('token')  // ，更新图片路径token
            }
          }
          // 检查是否有已上传的简历文件
          if (this.dataForm.resume) {
            const file = {
              name: this.dataForm.resume.split('/').pop(), // 从文件路径中提取文件名
              url: this.dataForm.resume
            }
            this.fileList = [file]
            this.dataForm.filePath = this.dataForm.resume
          }
          // ...
        } else {
          console.error('获取角色失败', data.msg)
        }
      }).catch(error => {
        console.error('获取角色失败', error)
      })
    },
    // 上传成功
    successHandle (response, file, fileList) {
      // 计算文件size
      this.dataForm.filePath = response.url  // 访问地址
      console.log(file.name + 'diz ' + this.dataForm.filePath)
      this.$message.success('上传成功')
    },
    // 文件状态改变时的钩子
    handleChange (file, fileList) {
      this.fileList = fileList.slice(-1) // 只保留最新上传的文件
    },
    // 文件移除时的钩子
    handleRemove (file, fileList) {
      this.fileList = fileList
    },
    // 文件上传前的校验
    beforeUpload (file) {
      const isPDF = file.type === 'application/pdf'
      const isLt10M = file.size / 1024 / 1024 < 10

      if (!isPDF) {
        this.$message.error('只能上传PDF文件！')
      }
      if (!isLt10M) {
        this.$message.error('文件大小不能超过10MB！')
      }
      return isPDF && isLt10M
    },

    // 预览文件
    previewFile (file) {
      const fileURL = this.dataForm.filePath + '?token=' + this.$cookie.get('token')
      window.open(fileURL, '_blank')
      console.log('预览地址' + fileURL)
    },

    // 删除文件
    removeFile () {
      this.fileList = []
      this.dataForm.filePath = ''
    },
    handleAvatarSuccess (response, file) {
      console.log('上传成功')
      this.dataForm.photo = response.url
      this.url = response.url + '?token=' + this.$cookie.get('token')  // 上传成功后，更新图片路径
      this.$message.success('上传成功' + this.url)
    },
    beforeAvatarUpload (file) {
      const isImage = /^image\/(jpeg|png|jpg)$/.test(file.type) // 支持 JPG、JPEG 和 PNG
      const isLt2M = file.size / 1024 / 1024 < 2 // 文件大小限制为 2MB

      if (!isImage) {
        this.$message.error('上传头像图片只能是 JPG、JPEG 或 PNG 格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isImage && isLt2M
    },
    // 提交简历
    dataFormSubmit () {
      this.$http({
        url: this.$http.adornUrl('/sys/user/resume'),
        method: 'post',
        data: this.$http.adornData({
          'userId': this.$store.state.user.id,
          'realName': this.dataForm.realName,
          'sex': this.dataForm.sex,
          'photo': this.dataForm.photo,
          'resume': this.dataForm.filePath,
          'university': this.dataForm.university,
          'major': this.dataForm.major,
          'degree': this.dataForm.degree,
          'position': this.dataForm.position
        })
      }).then(({data}) => {
        if (data && data.code === 0) {
          this.$message({
            message: '操作成功',
            type: 'success',
            duration: 1500,
            onClose: () => {
              this.visible = false
              this.$emit('refreshDataList')
            }
          })
        } else {
          this.$message.error(data.msg)
        }
      })
    }

  }
}
</script>

<style scoped>
/* 页面容器 */
.resume-form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh; /* 使容器占据整个视口高度 */
  background-color: #f5f5f5; /* 背景色 */
  padding: 20px;
}

/* 表单容器 */
.resume-form {
  width: 100%;
  max-width: 700px;
  background-color: white;
  padding: 30px;
  border-radius: 10px;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); /* 阴影效果 */
}

/* 表单标题 */
.resume-form h1 {
  text-align: center;
  margin-bottom: 20px;
  font-size: 24px;
  color: #333;
}

/* 表单组 */
.form-group {
  margin-bottom: 20px;
}

/* 标签 */
label {
  display: block;
  margin-bottom: 8px;
  font-weight: bold;
  color: #555;
}

/* 输入框、选择框 */
input[type="text"],
input[type="file"],
select {
  width: 100%;
  padding: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
  font-size: 14px;
}

/* 单选框组 */
.radio-group {
  display: flex;
  gap: 20px; /* 单选框之间的间距 */
}

.radio-group label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: normal;
}

/* 提交按钮 */
button {
  width: 100%;
  padding: 12px;
  background-color: #007BFF;
  color: white;
  border: none;
  border-radius: 5px;
  font-size: 16px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

button:hover {
  background-color: #0056b3;
}
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409EFF;
}
.avatar-uploader-icon {
  border: 2px dashed #d9d9d9;
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  line-height: 178px;
  text-align: center;
}
.avatar {
  width: 178px;
  height: 178px;
  display: block;
}
.uploaded-file-display {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.file-info {
  display: flex;
  align-items: center;
}

.file-info i {
  margin-right: 8px;
  color: #e74c3c; /* PDF图标颜色 */
  font-size: 20px;
}

.file-info span {
  font-size: 14px;
  color: #333;
}

.file-actions {
  display: flex;
  gap: 8px;
}

.uploaded-file-display {
  margin-top: 10px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f9f9f9;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ddd;
}

.file-info {
  display: flex;
  align-items: center;
}

.file-info i {
  margin-right: 8px;
  color: #e74c3c; /* PDF图标颜色 */
  font-size: 20px;
}

.file-info span {
  font-size: 14px;
  color: #333;
}

.file-actions {
  display: flex;
  gap: 8px;
}
</style>
